<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8 />
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <script src="assets/plugins/threejs/three.min.js"></script>
    <script src="assets/plugins/threejs/OrbitControls.js"></script>
    <script src="assets/plugins/threejs/GLTFLoader.js"></script>
    <script src="assets/plugins/threejs/OBJLoader.js"></script>
    <script src="assets/plugins/threejs/RGBELoader.js"></script>
    <script>
      let scene, camera, renderer, controls, light, model,hdrLoader;

      function init() {
        scene = new THREE.Scene();
        hdrLoader = new THREE.RGBELoader();
        hdrTexture = hdrLoader.load( 'textures/symmetrical_garden_2k.hdr', function ( texture, textureData ) {
          texture.encoding = THREE.LinearEncoding;
          texture.minFilter = THREE.LinearFilter;
          texture.magFilter = THREE.LinearFilter;
          texture.generateMipmaps = false;
          texture.flipY = true;
        } );
        scene.background = hdrLoader;

        camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,5000);
        camera.position.set(0,25,25);
        //controls = new THREE.OrbitControls( camera , renderer.domElement );
       // scene.add( new THREE.AxesHelper(500));

        light = new THREE.SpotLight(0xffa95c,4);
        light.position.set(-50,50,50);
        light.castShadow = true;
        light.shadow.bias = -0.0001;
        light.shadow.mapSize.width = 1024*4;
        light.shadow.mapSize.height = 1024*4;
        scene.add( light );

        hemiLight = new THREE.HemisphereLight(0xffeeb1, 0x080820, 4);
        scene.add(hemiLight);

        renderer = new THREE.WebGLRenderer();
        renderer.toneMapping = THREE.ReinhardToneMapping;
        renderer.toneMappingExposure = 2.3;
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.shadowMap.enabled = true;
        document.body.appendChild(renderer.domElement);

        
        new THREE.OBJLoader().load("models/dog/dog.obj",result => {
          model.position.set(0,-5,-25);
          model.traverse(n => { if ( n.isMesh ) {
            n.castShadow = true; 
            n.receiveShadow = true;
            if(n.material.map) n.material.map.anisotropy = 1; 
          }});
          scene.add(model);

          animate();
        });
      }
      function animate() {
        renderer.render(scene,camera);
        light.position.set( 
          camera.position.x + 10,
          camera.position.y + 10,
          camera.position.z + 10,
        );
        requestAnimationFrame(animate);
      }
      init();

    </script>
  </body>
</html>
